import React, { Component } from 'react';

/* 
  用React实现todoMvc的案例
  1.利用组件化编程思想 分为四个组件 Header TodoList TodoItem Footer 四个组件
    => 其中 TodoItem 是 TodoList的子组件 
    => 这四个组件 都是 App组件的子组件
  2.功能
    => 按回车键可以将Header组件输入的内容 自动渲染到TodoList组件里面
    => 有全选和单选功能
    => TodoList 组件里面 双击某一个TodoItem可以显示编辑框 点击回车可以确定编辑改变内容
    => 鼠标划入TodoItem 可以显示删除按钮 点击删除按钮可以删除一条TodoItem
    => 在全选的情况下 取消其中一个的话 那么全选按钮也不能被全中且如果TodoItem 的数量为0的话 也要取消全选
    => Footer 组件里面 未完成的Todo如果只有一条的话 那么显示 item 否则的话 显示 items
    => 点击 All按钮 显示所有todo
    => 点击 active按钮 显示所有未完成的Todo
    => 点击 Complete按钮 显示所有未完成的Todo
    => 点击 clear Complete 删除所有已完成
    => 如果Todo数量为0的话 那么Footer组件也要隐藏
*/

export class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text:''
    }
  }
  render() {
    return (
      <header>
        <label><input  type="checkbox" onChange={this.handlerCheckAll.bind(this)} checked={this.isAll()}/></label>
        <input autoFocus type="text" placeholder='What needs to be done?' value={this.state.text} onChange={this.handlerChange.bind(this)} onKeyDown={this.handlerKeyDown.bind(this)}/>
      </header>
    )
  }
  handlerChange(e) {
    this.setState({ text:e.target.value })
  }
  handlerKeyDown(e) {
    if(this.state.text.length === 0) return;
    if(e.code === 'Enter' || e.code === 'NumpadEnter'){
      const newTodo = {
        id:new Date(),
        title:this.state.text,
        isDone:false
      }
  
      this.props.addTodo(newTodo)

      this.setState({text:''})
     
    };

  }
  handlerCheckAll(e) {
    this.props.handlerCheckAll(e.target.checked)
  }
  isAll() {
    return this.props.items.length === this.props.items.filter(item => item.isDone).length && this.props.items.filter(item => item.isDone).length !== 0;
  }
}
class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow:true,
      text:this.props.item.title
    }
  }
  render() {
    return (
        <li>
          <label htmlFor=""><input type="checkbox" checked={this.props.item.isDone} onChange={this.handlerChange.bind(this)}/></label>
          
          {
            this.state.isShow 
            ? <div onDoubleClick={this.showInput.bind(this)}><h1>{this.props.item.title}</h1></div>
            : <input onBlur={this.cancelEdit.bind(this)} ref="inp" value={this.state.text} type="text" onChange={this.textChange.bind(this)} onKeyDown={this.ensureEdit.bind(this)}/>              
          }

          {
            this.state.isShow ? <button onClick={this.handlerRemoveTodo.bind(this)}>删除</button> : ''
          }
            
           
        </li>
    )
  } 
  handlerChange(e) {
    console.log(this.props.item)
    this.props.handler.oddChange(this.props.item,e.target.checked)
  } 
  
  handlerRemoveTodo() {
    this.props.handler.removeTodo(this.props.item.id);
  }
  textChange(e) {
    this.setState({text: e.target.value})
  }
  showInput(w) {
    this.setState({
      isShow:false
    }, function () {
      this.refs.inp.focus()
    })
  }
  ensureEdit(e) {
    if(e.code === 'Enter' || e.code === 'NumpadEnter') {
      if(this.state.text.length === 0){
        this.handlerRemoveTodo()
      }else {
        this.props.handler.editTodo(this.props.item.id, this.state.text);
      }
      this.setState({isShow:true})
    }

    if(e.code === 'Escape') {
      this.cancelEdit()
    }
  }
  cancelEdit() {
    this.setState({
      isShow:true,
      text:this.props.item.title
    })
  }
}

export class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return (
      <section>
        <ul>
          {
            this.props.items.map((item,index) => {
              if(this.props.handler.status === 'All') {
                return <TodoItem key={index} item={item} handler={this.props.handler}></TodoItem>
              }else if(this.props.handler.status === 'Active' && !item.isDone) {
                return <TodoItem key={index} item={item} handler={this.props.handler}></TodoItem>
              }else if(this.props.handler.status === 'Complete' && item.isDone) {
                return <TodoItem key={index} item={item} handler={this.props.handler}></TodoItem>
              }
            })
          }
          
        </ul>
      </section>
    )
  }
}

export class Footer extends Component {
  constructor(props) {
    super(props)

    this.state = {}
  }
  render() {
    return (
      <footer>
        <div className="left">{this.isDoneTotal()} item{this.isDoneTotal() === 1 ? '' : 's'}  left </div>
        <div className="status">
          <span onClick={this.handlerStatus.bind(this)}>All</span>
          <span onClick={this.handlerStatus.bind(this)}>Active</span>
          <span onClick={this.handlerStatus.bind(this)}>Complete</span>
        </div>
        <div className="removeComplete" onClick={this.removeComplete.bind(this)}>clear Complete</div>
        
      </footer>
    )
  }

  isDoneTotal() {
    return this.props.items.filter(item => !item.isDone).length;
  }

  handlerStatus(e) {
    this.props.handler.handlerStatus(e.target.innerHTML)
  }
  removeComplete() {
    this.props.handler.removeComplete()
  }
}






